<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="description"
          content="Sleek Dashboard - Free Bootstrap 4 Admin Dashboard Template and UI Kit. It is very powerful bootstrap admin dashboard, which allows you to build products like admin panels, content management systems and CRMs etc.">

    <!-- theme meta -->
    <meta name="theme-name" content="sleek"/>

    <title>首页</title>

    <!-- GOOGLE FONTS -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500|Poppins:400,500,600,700|Roboto:400,500"
          rel="stylesheet"/>

    <link href="https://cdn.materialdesignicons.com/4.4.95/css/materialdesignicons.min.css" rel="stylesheet"/>

    <!-- PLUGINS CSS STYLE -->
    <link href="/static/plugins/simplebar/simplebar.css" rel="stylesheet"/>
    <link href="/static/plugins/nprogress/nprogress.css" rel="stylesheet"/>

    <!-- No Extra plugin used -->
    <link href='/static/plugins/jvectormap/jquery-jvectormap-2.0.3.css' rel='stylesheet'>
    <link href='/static/plugins/daterangepicker/daterangepicker.css' rel='stylesheet'>


    <link href='/static/plugins/toastr/toastr.min.css' rel='stylesheet'>


    <!-- SLEEK CSS -->
    <link id="sleek-css" rel="stylesheet" href="/static/css/sleek.css"/>

    <!-- FAVICON -->
    <link href="/static/img/favicon.png" rel="shortcut icon"/>

    <!--
      HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
    -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="/static/plugins/nprogress/nprogress.js"></script>
</head>

<body class="header-fixed sidebar-fixed sidebar-dark header-light" id="body">
<script>
    NProgress.configure({showSpinner: false});
    NProgress.start();
</script>

<div id="toaster"></div>

<!-- ====================================
——— WRAPPER
===================================== -->
<div class="wrapper">


    <!-- ====================================
      ——— LEFT SIDEBAR WITH OUT FOOTER
    ===================================== -->

    <!-- ====================================
  ——— PAGE WRAPPER
  ===================================== -->
    <div class="page-wrapper">

        <!-- Header -->
        <header class="main-header " id="header">
            <nav class="navbar navbar-static-top navbar-expand-lg">
                <a href="/user/AllBooks"> <i class="mdi mdi-logout"></i> 返回首页 </a>
            </nav>
        </header>


        <!-- ====================================
        ——— CONTENT WRAPPER
        ===================================== -->
        <div class="content-wrapper">
            <div class="content">


                <!-- Top Statistics -->
                <div class="row">
                    <div class="col-xl-4 col-sm-6">
                        <div class="card card-mini mb-4">
                            <div class="card-body">
                                <h2 class="mb-1">1,153</h2>
                                <p>用户注册数</p>
                                <div class="chartjs-wrapper">
                                    <canvas id="barChart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4 col-sm-6">
                        <div class="card card-mini  mb-4">
                            <div class="card-body">
                                <h2 class="mb-1">603</h2>
                                <p>今日访客数</p>
                                <div class="chartjs-wrapper">
                                    <canvas id="dual-line"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4 col-sm-6">
                        <div class="card card-mini mb-4">
                            <div class="card-body">
                                <h2 class="mb-1">231</h2>
                                <p>今日借阅数</p>
                                <div class="chartjs-wrapper">
                                    <canvas id="line"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="row">
                    <div class="col-xl-12 col-md-12">

                        <!-- Sales Graph -->
                        <div class="card card-default">
                            <div class="card-header">
                                <h2>用户信息预览</h2>
                            </div>
                            <div>
                                <span style="position: absolute;left: 235px;top: 90px;font-size: 20px;">性别</span>
                                <span style="position: absolute;left: 555px;top: 90px;font-size: 20px;">借阅量</span>
                                <span style="position: absolute;left: 896px;top: 90px;font-size: 20px;">积分</span>
                                <span style="position: absolute;left: 1224px;top: 90px;font-size: 20px;">年龄</span>
                            </div>
                            <div style="padding-left: 100px">
                                <div class="card-body col-xl-3"
                                     style="height: 325px;width: 325px;display: inline-block">
                                    <canvas id="doChart" class="chartjs" style="display: inline-block"></canvas>
                                </div>
                                <div class="card-body col-xl-3"
                                     style="height: 325px;width: 325px;display: inline-block">
                                    <canvas id="doChart1" class="chartjs" style="display: inline-block"></canvas>
                                </div>
                                <div class="card-body col-xl-3"
                                     style="height: 325px;width: 325px;display: inline-block">
                                    <canvas id="doChart2" class="chartjs" style="display: inline-block"></canvas>
                                </div>
                                <div class="card-body col-xl-3"
                                     style="height: 325px;width: 325px;display: inline-block">
                                    <canvas id="doChart3" class="chartjs" style="display: inline-block"></canvas>
                                </div>
                            </div>
                            <div class="card-footer d-flex flex-wrap bg-white p-0">
                                <div class="col-6 px-0">
                                    <div class="text-center p-4">
                                        <h4>76,308</h4>
                                        <p class="mt-2">书籍总收录数</p>
                                    </div>
                                </div>
                                <div class="col-6 px-0">
                                    <div class="text-center p-4 border-left">
                                        <h4>24</h4>
                                        <p class="mt-2">种类总数</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


            </div>
        </div>

        <!-- Footer -->
        <footer class="footer mt-auto">
            <div class="copyright bg-white">
                <p>
                    Copyright &copy; <span id="copy-year"></span> <a class="text-primary"
                                                                     href="https://themefisher.com"
                                                                     target="_blank">书笺驿站</a>
                </p>
            </div>
            <script>
                var d = new Date();
                var year = d.getFullYear();
                document.getElementById("copy-year").innerHTML = year;
            </script>
        </footer>

    </div> <!-- End Page Wrapper -->
</div> <!-- End Wrapper -->


<!-- <script type="module">
  import 'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate';

  const el = document.createElement('pwa-update');
  document.body.appendChild(el);
</script> -->

<!-- Javascript -->
<script src="/static/plugins/jquery/jquery.min.js"></script>
<script src="/static/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="/static/plugins/simplebar/simplebar.min.js"></script>

<script src='/static/plugins/charts/Chart.min.js'></script>
<script src='/static/js/chart.js'></script>


<script src='/static/plugins/jvectormap/jquery-jvectormap-2.0.3.min.js'></script>
<script src='/static/plugins/jvectormap/jquery-jvectormap-world-mill.js'></script>
<script src='/static/js/vector-map.js'></script>

<script src='/static/plugins/daterangepicker/moment.min.js'></script>
<script src='/static/plugins/daterangepicker/daterangepicker.js'></script>
<script src='/static/js/date-range.js'></script>


<script src='/static/plugins/toastr/toastr.min.js'></script>


<script src="/static/js/sleek.js"></script>
<link href="/static/options/optionswitch.css" rel="stylesheet">
<script src="/static/options/optionswitcher.js"></script>
</body>
</html>

